<template>
  <view class="page">
    <uni-nav-bar :fixed="true" :border="false" background-color="none" title="我的" status-bar>
    		</uni-nav-bar>
			<up-popup :show="show" mode="center" @close="handleClose" round="15">
				<view style="background: #ffffff;border-radius: 30rpx;width:694rpx;display: flex;align-items: center;flex-direction: column;">
				   <view style="display: flex;align-items: center;margin-top: 42rpx;">
					  <image  style="width: 72rpx;height: 72rpx;"   src="https://static-tool.77.top/static/lushi-logo.png" mode=""></image>
					   <image style="width: 180rpx;height: 32rpx;"  src="https://static-tool.77.top/static/HSkpzs.png" mode="heightFix" />
				   </view>
				   <view style="margin: 0 30rpx;font-size: 28rpx;font-weight: 500;color: #47494D;">
					   您好！安卓手机请复制下方链接,在浏览器打开下载【77乐园APP】上进行修改用户名称哟,如果您已安装，请直接打开APP进行修改哟~
				   </view>
				   <view  style="display: flex;align-items: baseline;font-size: 28rpx;height: 60rpx;width: 90%;margin-top: 16rpx;">
					  <view style="height: 100%;flex-shrink: 0;">安卓手机请点击👉</view>
					  <view style="margin-left: 15rpx;">https:/file.77.top/app/77.apk?v=485</view>
				   </view>
				   <view  style="display: flex;align-items: baseline;font-size: 28rpx;height: 60rpx;width: 90%;margin-top: 24rpx;flex-wrap: wrap;">
				   					   <view style="max-width:60%;height: 100%;">苹果手机请点击👉</view>
				   					   <view style="margin-left: 15rpx;">https://m.77.top/</view>
				   </view>
				   <view @click="show=false"   style="width: 624rpx;height: 80rpx;background: #FD8B00;border-radius: 136rpx;font-size: 32rpx;font-weight: bold;color: #FFFFFF;text-align: center;line-height: 80rpx;margin: 48rpx 0;">
					   知道啦
				   </view>
				</view>
			</up-popup>
	  <view  class="flex align-items  justify-content" style="margin: 16rpx 32rpx;" @click="show =true">
		  <view style="display: flex;align-items: center;">
			  <view style="width: 112rpx;height: 112rpx;border-radius: 50%;background: #ffffff;display: flex;justify-content: center;align-items: center;">
				   <image v-if="isLogin" :src="listdata.avatar" mode="aspectFill" style="width: 96rpx;height:96rpx;border-radius: 50%;"></image>
				   <image v-else src="https://static-tool.77.top/static/default avatar.png" mode="aspectFill" style="width: 96rpx;height:96rpx;border-radius: 50%;"></image>
			  </view>
			  <view  style="margin-left: 32rpx;">
				    <view style="font-weight: bold;font-size: 32rpx;color: #2E3033;">{{isLogin ? listdata.user_name : '未登录'}}</view>
					<view v-if="isLogin" style="font-weight: 500;color: #2E3033;font-size: 20rpx;margin-top: 4rpx;">UID·{{listdata.vir_user_id}}</view>
					<view v-else style="font-weight: 500;color: #7B7D80;font-size: 20rpx;margin-top: 4rpx;">登录更精彩</view>
			  </view>
		  </view>
		<image src="https://static-tool.77.top/static/mine-set.png" mode=""  style="width:64rpx;height: 64rpx;" @click="gosetting"></image>
	  </view>
	  <view style="margin:24rpx ;" v-if="isLogin">
		  <view class="flex align-items">
		  		  <view v-for="(item,index) in pintype" :key="index" @click="xutype(index)" style="margin-right: 40rpx;font-size: 28rpx;font-weight: bold;position: relative;">
		  			  <view  :style="getStyle(index)">{{item}}</view>
		  			  <view  v-if="tyeps == index"    class="hengxian"></view>
		  		  </view>
		  </view>
		  <reviewlist v-if="tyeps == 0 && isLogin"></reviewlist>
		  <Collect v-if="tyeps == 1 && isLogin" />
	  </view>
	  <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 158rpx;" class="no-login" v-else>
	  	<image style="width: 360rpx; height: 360rpx;" src="https://static-tool.77.top/static/no-login.png" mode="aspectFit"></image>
		<view class="no-login-text" style="font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 32prx;
color: #2E3033;">
			暂未登录
		</view>
		<view style="font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #7B7D80;margin: 24rpx 0 32rpx 0;" class="no-login-sub-text">
			登录后可使用更多功能
		</view>
		<image @click="handleLogin" style="width: 208rpx;height: 60rpx;" src="https://static-tool.77.top/static/no-login-button.png" mode=""></image>
	  </view>
  </view>
</template>

<script setup>
	import request from '../../http';
	import reviewlist from './component/minepinglun.vue'
	import Collect from './component/Collect.vue'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	   import {
	                onLoad,onShow
	        } from "@dcloudio/uni-app";	
		let listdata = ref({})
		let  pintype = ref(['评论','收藏'])
		let tyeps = ref(3)
		const isLogin = ref(false)
		const xutype = (e) =>{
			 tyeps.value = e
		}
		const getStyle = (index) =>{
			 return {
			        color: tyeps.value === index ? '#2E3033' : '#47494D;' // 如果匹配则使用指定颜色，否则使用默认颜色
			      };
		}
		const initData = () => {
			request({
				url: 'api/user/info',
				method: 'POST',
			}).then(res => {
				listdata.value = res.data.user
			})
		}
		const gosetting = () => {
               uni.navigateTo({
               	url:'./setting'
               })
		}
		const handleLogin = () => {
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.uniPlatform;
			console.log(systemInfo);
			if (platform === 'mp-weixin') {
				uni.navigateTo({
					url: '/pages/login/wxlogin'
				});
			} else if (platform === 'h5' || platform == 'web') {
				uni.navigateTo({
					url: '/pages/login/h5login'
				});
			}
		}
		const show  = ref(false)
		onShow(() => {
			console.log('onshow-mine');
			isLogin.value = !!uni.getStorageSync("token")
			isLogin.value && initData()
		})
		onMounted(() => {
			  tyeps.value = 0
		})
		const handleClose = () => {
			show.value = false
		}
</script>

<style scoped>
	:deep(.uni-nav-bar-text){
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 32rpx;
	color: #17181A;
			}
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('https://static-tool.77.top/static/mine-bg.png') no-repeat center center;
  background-size: cover;
}
	:deep(.uni-navbar__header-btns-left) {
			width: 60px !important;
			font-weight: bold;
		}
			.hengxian{
				width: 56rpx;
				height: 4rpx;
				background: #2E3033;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				position: absolute;
				top: 100%;
				left: 0;
			}
</style>
